<template>
  <Row style="width:100%;height:100%;">
    <Col span="12">
    <Form ref="ref1" :model="addForm" :rules="rulesAddForm" :label-width="110" style="margin-top:10px;">
      <FormItem label="所属客户:" prop="companyId">
        <Select :disabled="isEdit" v-model="addForm.companyId" @on-change="_companyChange" style="width:80%;">
          <Option v-for="item in companyList" :value="item.id" :key="item.value" :label="item.name" />
        </Select>
      </FormItem>
      <FormItem label="所属区域:" prop="groupId">
        <Select v-model="addForm.groupId" style="width:80%;">
          <Option v-for="item in groupList" :value="item.id" :key="item.value" :label="item.name" />
        </Select>
      </FormItem>
      <FormItem label="设备名称:" prop="name">
        <Input v-model.trim="addForm.name" placeholder="请输入设备名称..." style="width:80%;" />
      </FormItem>
      <FormItem label="设备别名:" prop="alias">
        <Input v-model.trim="addForm.alias" placeholder="请输入设备别名..." style="width:80%;" />
      </FormItem>
      <FormItem label="设备位置:" prop="location">
        <Input v-model.trim="addForm.location" placeholder="请输入设备位置..." style="width:80%;" />
      </FormItem>
      <FormItem label="设备编号:">
        <Input v-model.trim="addForm.deviceNo" placeholder="请输入设备编号..." style="width:80%;" />
      </FormItem>
      <FormItem label="设备类型:" prop="type">
        <RadioGroup v-model="addForm.type" @on-change="typeOnChange">
          <Radio :disabled="isEdit" :label="1">硬盘录像机</Radio>
          <Radio :disabled="isEdit" :label="2">热成像仪</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="网络类型:" prop="networkType" v-if="addForm.type=='2'">
        <Select v-model="addForm.networkType" style="width:80%;">
          <Option :value="1" label="4G">4G</Option>
          <Option :value="2" label="局域网">局域网</Option>
        </Select>
      </FormItem>
      <FormItem label="对接方式:" prop="platform">
        <Select v-model="addForm.platform" style="width:80%;" @on-change="onPlantformChange">
          <Option :value="1" label="直连">直连</Option>
          <Option :value="2" label="海康8700">海康8700</Option>
          <Option :value="3" label="竞投系统">竞投系统</Option>
        </Select>
      </FormItem>
      <FormItem label="云台设备:" prop="havPTZ" v-if="addForm.type=='2'">
        <RadioGroup v-model="addForm.havPTZ">
          <Radio :label="true">有</Radio>
          <Radio :label="false">无</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="硬盘录像机:" prop="havNVR" v-if="addForm.type=='2'">
        <RadioGroup v-model="addForm.havNVR" @on-change="hasNVRChange">
          <Radio :label="true">有</Radio>
          <Radio :label="false">无</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="功能设置:" prop="func" v-if="addForm.type=='2'">
        <CheckboxGroup v-model="addForm.func" @on-change="funcOnChange">
          <Checkbox label="heatStatus" value="heatStatus">热成像</Checkbox>
          <Checkbox label="videoStatus" value="heatStatus">视频</Checkbox>
        </CheckboxGroup>
      </FormItem>
    </Form>
    </Col>
    <Col span="12">
    <Form ref="ref2" :model="addForm" :rules="rulesAddForm" :label-width="110" style="margin-top:10px;">
      <FormItem label="设备厂商:" prop="vendorId">
        <Select :disabled="isEdit" v-model="addForm.vendorId" style="width:80%;" @on-change="firmChange">
          <Option v-for="item in firmData" :value="item.id" :key="item.index" :label="item.name"></Option>
        </Select>
      </FormItem>
      <FormItem label="设备型号:" prop="modelId">
        <Select :disabled="isEdit" v-model="addForm.modelId" style="width:80%;" @on-change="_getArguments">
          <Option v-for="item in modelList" :value="item.id" :key="item.index" :label="item.model" />
        </Select>
      </FormItem>
      <FormItem label="所属录像机:" prop="nvrId" v-if="addForm.type=='2' && !!addForm.havNVR">
        <Select v-model="addForm.nvrId" style="width:80%;" @on-change="_getArguments">
          <Option v-for="item in diskList" :value="item.id" :key="item.index" :label="item.name"></Option>
        </Select>
      </FormItem>
      <!--  -->
      <FormItem label="NVR热成像资源编码:">
        <Input v-model.trim="addForm.nvrThermalCode" placeholder="请输入NVR热成像资源编码..." style="width:80%;" />
      </FormItem>
      <FormItem label="直连视频资源编码:">
        <Input v-model.trim="addForm.directVideoCode" placeholder="请输入直连视频资源编码..." style="width:80%;" />
      </FormItem>
      <FormItem label="直连热成像资源编码:">
        <Input v-model.trim="addForm.directThermalCode" placeholder="请输入直连热成像资源编码..." style="width:80%;" />
      </FormItem>
      <!--  -->
      <FormItem label="NVR视频资源编码:">
        <Input v-model.trim="addForm.nvrVideoCode" placeholder="请输入NVR视频资源编码..." style="width:80%;" />
      </FormItem>
      <FormItem label="通道地址:" v-if="showChannelIpForm">
        <Input v-model.trim="addForm.channelIp" placeholder="请输入通道地址..." style="width:80%;" />
      </FormItem>
      <FormItem label="热成像流地址:" v-if="showHotStreamForm">
        <Input v-model.trim="addForm.heatDirectStream" placeholder="请输入热成像流地址..." style="width:80%;" />
      </FormItem>
      <FormItem label="视频流地址:" v-if="showVideoStreamForm">
        <Input v-model.trim="addForm.videoDirectStream" placeholder="请输入热成像流地址..." style="width:80%;" />
      </FormItem>
      <FormItem label="视频代码:" v-if="showVideoCodeForm">
        <Input v-model.trim="addForm.cameraVideoCode" placeholder="请输入视频代码..." style="width:80%;" />
      </FormItem>
      <FormItem label="热成像代码:" v-if="showHotCodeForm">
        <Input v-model.trim="addForm.cameraThermalCode" placeholder="请输入热成像代码..." style="width:80%;" />
      </FormItem>
      <FormItem label="热成像NVR流地址:" v-if="showHotNvrForm">
        <Input v-model.trim="addForm.heatNvrStream" placeholder="热成像NVR流地址..." style="width:80%;" />
      </FormItem>
      <FormItem label="视频NVR流地址:" v-if="showVideoNvrForm">
        <Input v-model.trim="addForm.videoNvrStream" placeholder="视频NVR流地址..." style="width:80%;" />
      </FormItem>
      <FormItem label="HTTP端口:">
        <Input v-model.trim="addForm.httpPort" placeholder="请输入通道端口..." style="width:80%;" />
      </FormItem>
      <FormItem label="RTSP端口:">
        <Input v-model.trim="addForm.rtspPort" placeholder="请输入通道端口..." style="width:80%;" />
      </FormItem>
      <FormItem label="通讯协议:">
        <Select :disabled="isEdit" v-model="addForm.protocolId" style="width:80%;">
          <Option v-for="item in argumentList" :value="item.id" :key="item.index" :label="item.name" />
        </Select>
      </FormItem>
      <!-- <FormItem label="采集频率:" prop="rate" v-if="addForm.type=='2'">
        <Input v-model.trim="addForm.rate" placeholder="请输入采集频率..." style="width:80%;"></Input>
      </FormItem> -->
      <FormItem label="是否启用:" prop="enable">
        <i-switch v-model="addForm.enable">
          <span slot="open">On</span>
          <span slot="close">Off</span>
        </i-switch>
      </FormItem>
    </Form>
    </Col>
  </Row>
</template>
<script>
import { formMixin, addForm } from "./material"

import {
  getSearchCompany,
  getGroupList,
  getFirmList,
  getModel,
  getArguments,
  getDisk,
  postDisk,
  putDisk
} from "@/api"

const addFunc = (params, arr) => {
  if (arr.indexOf("heatStatus") > -1) {
    params["heatStatus"] = true
  } else {
    params["heatStatus"] = false
  }

  if (arr.indexOf("videoStatus") > -1) {
    params["videoStatus"] = true
  } else {
    params["videoStatus"] = false
  }
  return params
}

const returnFunc = params => {
  let arr = []
  if (String(params["heatStatus"]) === "true") {
    arr.push("heatStatus")
  }
  if (String(params["videoStatus"]) === "true") {
    arr.push("videoStatus")
  }
  return arr
}

export default {
  mixins: [formMixin],
  props: {
    row: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    const self = this
    self.getCompanyLists()
    self._getFirmList()
    if (self.isEdit) {
      self.isEditFunc(self.row)
    }
  },
  data() {
    return {
      hasNVR: false, // 是否是硬盘录像机
      whichPlantform: 1, // 对接平台
      funcSetting: [],
      companyList: [],
      groupList: [],

      // 设备列表
      modelList: [],

      // 厂商列表
      firmData: [],

      // 录像机列表
      diskList: [],

      // 协议列表
      argumentList: [],
      addForm: JSON.parse(JSON.stringify(addForm)),

      showChannelIpForm: false,
      showHotStreamForm: false,
      showVideoStreamForm: false,

      showVideoCodeForm: false,
      showHotCodeForm: false,

      showVideoNvrForm: false,
      showHotNvrForm: false
    }
  },

  methods: {
    // 计算通道地址
    calcChannelIp() {
      if (this.whichPlantform === 1 || this.whichPlantform === 2) {
        this.showChannelIpForm = true
      } else {
        this.showChannelIpForm = false
      }

 
    },

    // 计算热成像流
    calcHotStreamForm() {
      if (
        this.addForm.type == "2" &&
        this.whichPlantform === 1 &&
        this.funcSetting.includes("heatStatus")
      ) {
        this.showHotStreamForm = true
      } else {
        this.showHotStreamForm = false
      }
    },

    // 计算视频流
    calcVideoStream() {
      if (
        this.addForm.type == "2" &&
        this.whichPlantform === 1 &&
        this.funcSetting.includes("videoStatus")
      ) {
        this.showVideoStreamForm = true
      } else {
        this.showVideoStreamForm = false
      }
    },

    // 计算视频代码
    calcVideoCode() {
      if (
        this.addForm.type == "2" &&
        this.whichPlantform === 2 &&
        this.funcSetting.includes("videoStatus")
      ) {
        this.showVideoCodeForm = true
      } else {
        this.showVideoCodeForm = false
      }
    },

    // 计算热成像代码
    calcHotCode() {
      if (
        this.addForm.type == "2" &&
        this.whichPlantform === 2 &&
        this.funcSetting.includes("heatStatus")
      ) {
        this.showHotCodeForm = true
      } else {
        this.showHotCodeForm = false
      }
    },

    // 计算视频nvr流
    calcVideoNvr() {
      if (
        this.addForm.type == "2" &&
        this.hasNVR &&
        this.funcSetting.includes("videoStatus")
      ) {
        this.showVideoNvrForm = true
      } else {
        this.showVideoNvrForm = false
      }
    },

    // 计算热成像nvr流
    calcHotNvr() {
      if (
        this.addForm.type == "2" &&
        this.hasNVR &&
        this.funcSetting.includes("heatStatus")
      ) {
        this.showHotNvrForm = true
      } else {
        this.showHotNvrForm = false
      }
    },

    // 设备类型
    typeOnChange() {
      this.addForm.vendorId = ''
      this.addForm.modelId = ''
      this.calcChannelIp()
      this.calcHotStreamForm()
      this.calcVideoStream()
      this.calcVideoCode()
      this.calcHotCode()
      this.calcVideoNvr()
      this.calcHotNvr()
    },

    // 对接平台change
    onPlantformChange(value) {
      this.whichPlantform = value
      this.calcChannelIp()
      this.calcHotStreamForm()
      this.calcVideoStream()
      this.calcVideoCode()
      this.calcHotCode()
      this.calcVideoNvr()
      this.calcHotNvr()
    },

    // 硬盘录像机change
    hasNVRChange(value) {
      this.hasNVR = value
      this.calcChannelIp()
      this.calcVideoStream()
      this.calcVideoCode()
      this.calcHotCode()
      this.calcVideoNvr()
      this.calcHotNvr()
      this._getDisk()
    },

    // 功能设置change
    funcOnChange(value) {
      this.funcSetting = JSON.parse(JSON.stringify(value))
      this.calcChannelIp()
      this.calcHotStreamForm()
      this.calcVideoStream()
      this.calcVideoCode()
      this.calcHotCode()
      this.calcVideoNvr()
      this.calcHotNvr()
    },

    // 获取录像机列表
    _getDisk() {
      let params = {
        type: 1,
        size: 1000000
      }
      getDisk({
        params
      }).then(res => {
        if (res.code == 200) {
          this.diskList = res.data.list
        }
      })
    },

    isEditFunc(row) {
      let that = this
      let obj = JSON.parse(JSON.stringify(row))
      if (obj.type === 2) that._getDisk()

      // 获取厂商列表
      that._getFirmList()
      that._getArguments()

      let groupParams = {
        companyId: obj.companyId
      }
      getGroupList(groupParams).then(res => {
        if (res.code == 200) {
          that.groupList = res.data.list
        }
      })

      let modelParams = {
        vendorId: obj.vendorId,
        type: obj.type
      }
      getModel({
        params: modelParams
      }).then(res => {
        if (res.code == 200) {
          that.modelList = res.data
          that.addForm = { ...obj, func: [] }
          this.hasNVR = obj.hasNVR
          that.addForm.func = [...returnFunc(obj)]
          this.funcSetting = that.addForm.func
          this.havNVR = that.addForm.havNVR
          this.whichPlantform = obj.platform || 1
          this.calcHotCode()
          this.calcVideoCode()
          this.calcChannelIp()
        }
      })
    },

    // 获取企业列表
    async getCompanyLists() {
      let that = this
      let params = {
        page: 1,
        size: 100000,
        thermalImage: 1
      }
      await getSearchCompany(params).then(res => {
        if (res.code == 200) {
          that.companyList = res.data
        }
      })
    },

    // 获取厂商列表,要清空设备型号选中的以及列表
    async _getFirmList() {
      const vm = this
      vm.addForm.modelId = ""
      vm.modelList = []
      await getFirmList().then(res => {
        if (res.code == 200) {
          this.firmData = res.data
        }
      })
    },

    // 厂商 change 事件,并且获取设备型号列表
    firmChange(id) {
      const vm = this
      vm.addForm.modelId = ""
      // addForm.modelId
      if (!id) {
        vm.modelList = []
        return false
      }
      let params = {
        vendorId: id,
        type: vm.addForm.type
      }
      getModel({
        params
      }).then(res => {
        if (res.code === 200) {
          vm.modelList = res.data
        }
      })
    },

    // 获取协议列表
    _getArguments() {
      let that = this
      getArguments().then(res => {
        if (res.code == 200) {
          that.argumentList = res.data
        }
      })
    },

    /**
     * 设备类型 change 事件
     * 如果设备类型为2（热成像仪）时，获取硬盘录像机列表
     * */
    radioChange(name) {
      let vm = this
      // 获取厂商列表
      vm._getFirmList()

      if (name == 2) {
        vm._getDisk()
      }
      try {
        vm.$refs.ref2.resetFields()
      } catch (e) {}
    },

    // 企业变更
    _companyChange(id) {
      this.addForm.groupId = ""
      this._getGroupList(id)
    },

    // 获取企业下/区域列表
    _getGroupList(id) {
      let that = this
      let params = {
        companyId: id
      }
      getGroupList(params).then(res => {
        if (res.code == 200) {
          that.groupList = res.data.list
        }
      })
    },

    // 新建提交
    $ref2() {
      let that = this,
        {
          companyId,
          groupId,
          name,
          alias,
          deviceNo,
          vendorId,
          modelId,
          channelIp,
          location,
          httpPort,
          rtspPort,
          protocolId,
          enable,
          type,
          nvrId,
          func,
          havPTZ,
          havNVR,
          networkType,
          heatDirectStream,
          videoDirectStream,
          heatNvrStream,
          videoNvrStream,
          cameraThermalCode,
          platform,
          nvrVideoCode,
          nvrThermalCode,
          directVideoCode,
          directThermalCode
        } = { ...that.addForm },
        params = {
          companyId,
          groupId,
          name,
          alias,
          deviceNo,
          vendorId,
          modelId,
          channelIp,
          location,
          httpPort,
          rtspPort,
          protocolId,
          enable,
          type,
          func,
          heatDirectStream,
          videoDirectStream,
          heatNvrStream,
          videoNvrStream,
          cameraThermalCode,
          platform,
          nvrVideoCode,
          nvrThermalCode,
          directVideoCode,
          directThermalCode
        }

      params = addFunc(params, func)
      if (that.addForm.type == 2) {
        params["nvrId"] = nvrId
        params["havPTZ"] = havPTZ
        params["havNVR"] = havNVR
        params["networkType"] = networkType
      }
      delete params.func
      this.$emit("addBtn")
      postDisk(params).then(res => {
        if (res.code == 200) {
          setTimeout(_ => {
            this.$Message.success("新建设备成功")
            this.$emit("save")
          }, 500)
        } else {
          this.$Message.error(res.message)
        }
      })
    },

    $ref3() {
      let that = this,
        {
          id,
          companyId,
          groupId,
          name,
          alias,
          deviceNo,
          vendorId,
          modelId,
          channelIp,
          location,
          httpPort,
          rtspPort,
          protocolId,
          enable,
          type,
          nvrId,
          func,
          havPTZ,
          havNVR,
          networkType,
          heatDirectStream,
          videoDirectStream,
          heatNvrStream,
          videoNvrStream,
          cameraThermalCode,
          nvrVideoCode,
          nvrThermalCode,
          directVideoCode,
          directThermalCode
        } = { ...that.addForm },
        params = {
          id,
          companyId,
          groupId,
          name,
          alias,
          deviceNo,
          vendorId,
          modelId,
          channelIp,
          location,
          httpPort,
          rtspPort,
          protocolId,
          enable,
          type,
          func,
          heatDirectStream,
          videoDirectStream,
          heatNvrStream,
          videoNvrStream,
          cameraThermalCode,
          nvrVideoCode,
          nvrThermalCode,
          directVideoCode,
          directThermalCode
        }
      that.$emit("editBtn", true)
      params = addFunc(params, func)
      if (that.addForm.type == 2) {
        params["nvrId"] = nvrId
        params["networkType"] = networkType
        params["havPTZ"] = havPTZ
        params["havNVR"] = havNVR
      }
      delete params.func
      putDisk(params).then(res => {
        if (res.code == 200) {
          setTimeout(_ => {
            that.$Message.success("编辑备成功")
            that.$emit("edit")
          }, 1000)
        } else {
          that.$Message.error(res.message)
          that.$emit("editBtn", false)
        }
      })
    },

    submit() {
      let that = this
      that.$refs.ref1.validate(valid => {
        if (valid) {
          that.$refs.ref2.validate(v1 => {
            if (v1) {
              if (that.isEdit) {
                that.$ref3()
              } else {
                that.$ref2()
              }
            }
          })
        }
      })
    }
  }
}
</script>
